<!-- 商品详情页 -->
<template>
    <page-view-top-nav :element="element" />
    <el-scrollbar height="100%">
        <div class="page-goods-detail">
            <div class="goods-detail-header">
                <div class="goods-detail-swiper">商品图片</div>
                <div class="goods-detail-title">
                    <div class="left-wrap">商品名称</div>
                    <div class="right-wrap">
                        <el-icon><icon-grade-ele-heart /></el-icon>
                    </div>
                </div>
                <div class="goods-detail-info">
                    <div v-if="!customFeature.hiddenGoodsPrice || !customFeature.hiddenGoodsOriginalPrice" class="goods-detail-price">
                        <div v-if="!customFeature.hiddenGoodsPrice" class="real-price" :style="{ color: customFeature.theme.tertiaryColor }">￥699</div>
                        <div v-if="!customFeature.hiddenGoodsOriginalPrice" class="vitrual-price">￥999</div>
                    </div>
                </div>
            </div>

            <div v-if="!customFeature.hiddenGoodsPurchaseType || !customFeature.hiddenGoodsExpress" class="row-list">
                <div v-if="!customFeature.hiddenGoodsPurchaseType" class="row-item">
                    <div class="row-item-left">购买类型</div>
                    <div class="row-item-content"></div>
                    <el-icon class="row-item-right"><icon-arrow-right /></el-icon>
                </div>
                <div v-if="!customFeature.hiddenGoodsExpress" class="row-item">
                    <div class="row-item-left">快递包邮</div>
                    <div v-if="!customFeature.hiddenGoodsSold" class="row-item-content">已售100件</div>
                </div>
            </div>

            <div class="tab-wrap">
                <div class="tab-header">
                    <div v-if="!customFeature.hiddenGoodsDetails" class="tab-header-item ative" :style="{ color: customFeature.theme.tertiaryColor }">商品详情</div>
                    <div v-if="!customFeature.hiddenGoodsParams" class="tab-header-item">产品参数</div>
                    <div v-if="!customFeature.hiddenGoodsComment" class="tab-header-item">商品评价</div>
                </div>
                <div class="tab-pan"></div>
            </div>
        </div>
    </el-scrollbar>
    <div class="page-goods-detail-tabber">
        <div class="left-buttons-wrap">
            <template v-for="(item, index) in customFeature.goodsBottomBtns" :key="index">
                <div class="sub-btn">
                    <el-icon v-if="item.name === 'home'"><icon-home /></el-icon>
                    <template v-if="item.name === 'shopCart'">
                        <el-icon><icon-shopping-cart /></el-icon>
                        <div class="sun-btn-badge" :style="{ backgroundColor: customFeature.theme.tertiaryColor }">10</div>
                    </template>
                    <el-icon v-if="item.name === 'share'"><icon-share /></el-icon>
                    <el-icon v-if="item.name === 'contact'"><icon-service /></el-icon>
                    <div class="sun-btn-txt">
                        {{ item.label }}
                    </div>
                </div>
            </template>
        </div>
        <div class="right-buttons-wrap">
            <div class="add-btn" :style="{ backgroundColor: customFeature.theme.secondaryColor }">
                加入购物车
            </div>
            <div class="buy-btn" :style="{ backgroundColor: customFeature.theme.primaryColor }">
                立即购买
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import PageViewTopNav from '../../page-view-top-nav'
export default defineComponent({
    name: 'GoodsDetail',
    components: {
        PageViewTopNav
    },
    props: {
        element: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { element } = toRefs(props)

        const customFeature = computed(() => element.value?.customFeature || {})

        return {
            element,
            customFeature
        }
    }
})
</script>

<style lang="less" scoped>
@import './goods-detail.less';
</style>